import React, { useState, useEffect } from 'react';
import {View} from '@tarojs/components'
import {MainLabelType} from '../../utils/server.interface'
import {gotoPage} from '../../utils/tools'
import './main-label.scss'

const MainLabel: React.FC<{ data: MainLabelType[]; cityLabelsLength: any }> = (props) => {
  const [labels, setLabels] = useState<MainLabelType[]>([])
  useEffect(() => {
    const labelArr = props.data
    let blank: any = []
    if (labelArr && labelArr.length > 0) {
      const length = labelArr.length
      const num = length % 4
      if (num > 0) {
        blank = Array(4 - num).fill({})
      }
    }

    setLabels(labelArr.concat(blank))
  }, [props.data])
  return (
    <View className={`main-label ${props.cityLabelsLength > 0 ? 'no-bottom-left-right-radius' : ''}`}>
      {labels.length > 0 && labels.map((item, index) => <View className='item' key={index}
        onClick={() => gotoPage(item.url || '')}
      >
        <View className='title'>{item.name}</View>
        <View className={`label ${process.env.TARO_ENV}`}
          style={item.isMark ? `background-color: ${item.markColor};` : ''}
        >{item.des}</View>
      </View>)}
    </View>
  )
}
MainLabel.defaultProps = {
  data: [],
  cityLabelsLength: 0
}

export default MainLabel
